;(function (window) {
  const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        if (el.contains(e.target)) {
          return false;
        }
        if (binding.expression) {
          binding.value(e);
        }
      }

      el.__vueClickOutside__ = documentHandler;
      document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
      document.removeEventListener('click', el.__vueClickOutside__);
      delete el.__vueClickOutside__;
    },
  };

  const hlDialog = {
    template:`<section class="hl-dialog-container" v-if="isShowDialog">
      <div class="hl-dialog" :style="{'width':width + 'px'}">
        <div class="hl-dialog__title">
          {{title}}
          <span class="close-icon icon-Gm-close" @click="closeDialog"></span>
        </div>
        <div class="hl-dialog__body"
             :class="{'is-bottom-raidus':!isShowFooter}"
             :style="{'max-height': height + 'px'}"
        >
          <slot name="default"></slot>
        </div>
        <div class="hl-dialog__footer" v-show="isShowFooter">
          <slot name="footer"></slot>
        </div>
      </div>
    </section>`,
    data(){
      return {
        isShowDialog:false,
        isShowFooter:false
      }
    },
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      title:{
        type:String,
        default:''
      },
      width:{
        type:Number,
        default:650
      },
      height:{
        type:Number,
        default:350
      },
      dashed: {
        type:Boolean,
        default:false
      },
    },
    directives: {
      clickoutside
    },
    watch:{
      visible(val){
        this.isShowDialog = val
      }
    },
    computed:{

    },
    created(){
      this.isShowDialog = this.visible
    },
    mounted(){
      this.calIsShowFooter()
    },
    methods:{
      calIsShowFooter(){
        if(this.$slots && this.$slots.footer) this.isShowFooter = true
      },
      closeDialog(){
        this.isShowDialog = false
        this.$emit('on-close',false)
      }
    }
  }

  Vue.component('hl-dialog',hlDialog)

} (window))
